<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>掌上工单-公告</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		
			.mui-bar~.mui-content .mui-fullscreen {
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			.danger{
				color: #dd524d;
			}
			.success{
				color: #4cd964;
			}
			.primary{
				color: #007aff;
			}
			.warning{
				color: #f0ad4e;
			}
			.purple{
				color: #8a6de9;
			}
			.black{
				color:#000000;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div class="mui-slider-group" id="list">
					<div class="mui-slider-item mui-control-content mui-active">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" data-type="all">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script id='notice-template' type="text/template">
			<% if(row){ %>
			<a data-date="<%=row.udate || '' %>" href="notice-detail.html?noticeId=<%=row.id || '' %>" class="mui-navigate-right xhz-child">
            	<div class="mui-media-body mui-navigate-right">
            		<p class="mui-ellipsis mui-h4 black"><%=row.title || '' %></p>
		            <p class="mui-ellipsis mui-h5"><%=row.remark || '' %></p>
		            <p class="mui-h6 mui-ellipsis">发布者：<%=row.cusername || '' %></p>
		            <p class="mui-h5">有效期：<%=(row.sdate || "" )%> ~ <%=(row.edate || "" )%></p>
            	</div>
            </a>
            <%}%>
		</script>
	</body>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/md5.js" ></script>
	<script type="text/javascript" src="js/uuid.js" ></script>
	<script type="text/javascript" src="js/utils.js" ></script>
	<script>
		
		var aniShow = "pop-in";
		 //只有ios支持的功能需要在Android平台隐藏；
		if (mui.os.android) {
			var list = document.querySelectorAll('.ios-only');
			if (list) {
				for (var i = 0; i < list.length; i++) {
					list[i].style.display = 'none';
				}
			}
			//Android平台暂时使用slide-in-right动画
			if(parseFloat(mui.os.version)<4.4){
				aniShow = "slide-in-right";
			}
		}
	
		//主列表点击事件
		mui('#list').on('tap', 'a', function() {
			var id = this.getAttribute('href');
			var href = this.href;
			var type = this.getAttribute("open-type");
				mui.openWindow({
					id: id,
					url: this.href,
					show: {
						aniShow: aniShow
					},
					waiting: {
						autoShow: false
					}
				});
		});
		
	</script>
	
	<script src="js/mui.pullToRefresh.js"></script>
	<script src="js/mui.pullToRefresh.material.js"></script>
	<script src="js/arttmpl.js"></script>
	<script>
	// 选项卡切换和下拉刷新
		mui.init();
		(function($) {
			var page = 1, timestamp = 0 ,notices = null; 				// 分页全局变量
			//阻尼系数
			var deceleration = mui.os.ios?0.003:0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration:deceleration
			});
					
			
			template.config('escape', false);
			
			$.plusReady(function() {
				//初始化所有下拉刷新，上拉加载。
				notices = $('.mui-scroll').pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										var children = self.element.querySelectorAll(".mui-table-view .xhz-child");
											if(children.length > 0){
												timestamp = children[0].getAttribute("data-date") ;
											}else{
												timestamp = 0 ;
											}
										createAndInsertFragment(false,ul,8,"down" ,timestamp);
										self.endPullDownToRefresh();
									}, 500);
								}
							},
							up: {
								auto: false,
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										createAndInsertFragment(true,ul,8,"up" ,'');
										self.endPullUpToRefresh(); 
									}, 500);
								}
							}
				});
				/**
				 * 创建并添加文档碎片
				 * @param {Object} count 一次显示的条目
				 * @param {Object} reverse 指定是正向插入还是反向插入
				 * @param {Object} parent 父级元素
				 */
				var createAndInsertFragment = function(reverse,parent,pageSize,upOrDown,timestamp) {
					//取消菜单的公告的脚标
				//	var mainpage = mui.currentWebview.parent();
				//	mui.fire(mainpage, "noticetips:close");
					xhz.ajax(URL_NOTICE,{page:page, pageSize:pageSize, upOrDown:upOrDown, updateTime:timestamp||''},function(data){
						if('down' == upOrDown){
							var mainPage = plus.webview.getWebviewById('main') ;
							if(mainPage){
								mui.fire(mainPage,'tips:clear',{id:'mui-icon-chatbubble'});
							}
						}
						if(!data || data.code != 1){
							mui.toast('你刷的太勤快了，亲');
							return ;
						}
						afterGotData(data.data);
					}) ;
					
					/**
					 * 处理数据逻辑
					 * @param {Object} data
					 */
					function afterGotData(data) {
						//console.log(data.length);
						if(!data || !data[0]){
							mui.toast('亲，暂时没有别的公告了');
							return;
						}
						++page;
						var fragment = document.createDocumentFragment();
						var li;
						$.each(data ,function(){
							li = document.createElement('li');
							li.className = 'mui-table-view-cell mui-media';
							var $row = this ;
							var detailInfo = template('notice-template', {
								"row": $row
							});
							li.innerHTML = detailInfo ;
							fragment.appendChild(li);
						}) ;
						
						// 将文档碎片插入到DOM节点
						reverse ? parent.appendChild(fragment) : parent.insertBefore(fragment, parent.firstChild);
					}
				};
				
				window.addEventListener("notice:loading", noticeLoading);
				function noticeLoading (){
					var children = document.querySelectorAll(".mui-table-view .xhz-child");
					if(children.length == 0){
						notices.pullUpLoading();
					}
				}
				
			});
		})(mui);
		
	</script>

</html>
